<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'
	let id = ''
	//1.获取表单
	const formData = ref({
		name: '',
		gender: 1,
		idCard: '',
		defaultFlag: 1,
	})
	//2.校验规则
	const formRules = {
		name: {
			rules: [
				{ required: true, errorMessage: '请输入患者的名字' },
				{ pattern: '^[\u4e00-\u9fa5]{2,5}$', errorMessage: '请输入2-5个字的汉字名字' },
			],
		},
		idCard: {
			rules: [
				{ required: true, errorMessage: '请输入患者的身份证' },
				{
					pattern:
						'^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
					errorMessage: '请输入正确的身份证号码',
				},
			],
		},
		gender: {
			rules: [
				{ required: true, errorMessage: '请勾选患者的性别' },
				{
					//根据身份证号码的第十位置来验证性别  偶数为男性
					validateFunction: function (rule, value, data, callback) {
						if (data.idCard.slice(16, 17) % 2 !== value) {
							callback('选择的性别与身份证的性别不一致')
						}
						//验证通过以后会返回true
						return true
					},
				},
			],
		},
	}
	//3.提交表单元素
	const formRef = ref()
	//提交数据
	// async function SubmitData() {
	// 	// console.log('我要开始提交数据了~')
	// 	try {
	// 		await formRef.value?.validate()
	// 	} catch (e) {
	// 		//TODO handle the exception
	// 		console.log(e)
	// 	}
	// }
	//提交数据
	const SubmitData = async () => {
		try {
			//根据规则来校验数据
			await formRef.value.validate()
			if (id != '') {
				await updatePatientApi({
					name: formData.value.name,
					idCard: formData.value.idCard,
					defaultFlag: formData.value.defaultFlag,
					gender: formData.value.gender,
					id: id,
				})
			} else {
				//在提交数据
				await addPatientApi(formData.value)
			}

			// uni.showToast({
			// 	title: '添加成功',
			// 	icon: 'success',
			// })
			//跳转到患者列表
			uni.navigateBack()
		} catch (e) {
			//TODO handle the exception
			console.log(e)
		}
	}
	//修改是否是默认病人
	const changeDefault = () => {
		formData.value.defaultFlag = formData.value.defaultFlag === 1 ? 0 : 1
	}

	//修改的逻辑
	onLoad(async (query) => {
		// console.log(query)
		//根据id来判断是添加还是修改患者信息
		if (query.id) {
			//编辑患者信息
			//需要修改顶部标题
			uni.setNavigationBarTitle({
				title: '编辑信息',
			})

			//掉接口 拿数据
			const res = await patientDetailApi(query.id)
			// console.log(res)
			//保存数据和id
			id = res.id
			formData.value = res
		} else {
			//修改患者信息
		}
	})
</script>

<template>
	<scroll-page>
		<view class="archive-page">
			<uni-forms
				border
				label-width="220rpx"
				:model="formData"
				:rules="formRules"
				ref="formRef"
			>
				<uni-forms-item label="患者姓名" name="name">
					<uni-easyinput
						v-model="formData.name"
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写真实姓名"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者身份证号" name="idCard">
					<uni-easyinput
						v-model="formData.idCard"
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写身份证号"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者性别" name="gender">
					<uni-data-checkbox
						v-model="formData.gender"
						selectedColor="#16C2A3"
						:localdata="[
							{ text: '男', value: 1 },
							{ text: '女', value: 0 },
						]"
					/>
				</uni-forms-item>
				<uni-forms-item label="默认就诊人" name="defaultFlag">
					<view class="uni-switch">
						<switch
							@tap="changeDefault"
							:checked="formData.defaultFlag === 1"
							color="#20c6b2"
							style="transform: scale(0.7)"
						/>
					</view>
				</uni-forms-item>
				<button @tap="SubmitData" class="uni-button">保存</button>
			</uni-forms>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
